<template>
  <div class="category container">
    <!-- 面包屑导航 -->
    <BreadCrumb :info="info" />
    <!-- 轮播图banner -->
    <Swiper class="swiper container">
      <SwiperItem v-for="item in swiperList" :key="item.id">
        <img :src="item.picUrl" :alt="item.name">
      </SwiperItem>
    </Swiper>
    <!-- 过滤器 -->
    <Filtrate :address="address" :list="categoryList"/>
    <!-- 商品 -->
    <Cate v-for="cate in categoryList" :key="cate.id" :data="cate"/>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filtrate from '@/components/category/Filtrate'
import Cate from '@/components/category/Cate'
import BreadCrumb from '@/components/BreadCrumb'
import { fetchCategory } from '@/api'

export default {
  data () {
    return {
      info: [],
      // 地址
      address: [],
      // 轮播图
      swiperList: [],
      // 分类及下面的商品列表
      categoryList: []
    }
  },

  async created () {
    // 获取属性名称
    this.getCategoryName()
    // 请求接口获取配送地址，商品等信息
    const { deliveryAreaList, categoryItemList, focusList } = await fetchCategory()
    // 配送地址
    this.address = deliveryAreaList
    // 轮播图
    this.swiperList = focusList
    // 分类及下面的商品列表
    this.categoryList = categoryItemList
  },

  watch: {
    $route (to, from) {
      this.getCategoryName()
    }
  },

  methods: {
    ...mapActions(['getCategoryInfo']),

    /**
     * 获取属性名称
     */
    getCategoryName () {
      // 先清空数据
      this.info = []
      // 获取父分类名称
      this.getCategoryInfo((list) => {
        list.forEach(item => {
          if (item.id === Number(this.$route.params.categoryId)) {
            this.info.push({
              title: item.name,
              link: ''
            })
          }
        })
      })
    }
  },

  computed: {
    ...mapGetters(['category'])
  },

  components: {
    Filtrate,
    Cate,
    BreadCrumb
  }
}
</script>

<style lang="less" scoped>
@import "./../styles/variable";

.category {
  .swiper {
    height: 310px;
  }
}
</style>
